<template>
  <div style="background: #f5f5f5">
    <div class="failure-body">
      <div v-if="IOSCardListData">
        <div class="failure" v-for="(item, index) in list" :key="index">
          <div class="failure-top" :style="{
            'background-image': 'url(' + failureUrl + ')',
            'background-size': '72px 72px',
            'background-repeat': 'no-repeat',
            'background-position': '99% 2px',
          }">
            <div class="failure-top-num">
              <span class="pay-num">{{ (item.txnAmt / 100).toFixed(0) }}</span>
            </div>
            <div class="failure-top-content">
              <div class="failure-code">充值码</div>
              <div class="failure-time">
                有效期：{{ item.expireDate | getDates }}
              </div>
            </div>
          </div>
          <div class="failure-footer">充值码券码：{{ item.cardNo }}</div>
        </div>
      </div>
      <div class="shubiKq-item" v-show="couponList.length > 0">
        <div class="shubiKq" v-for="(item, index) in couponList" :key="index">
          <div class="shubiKq-top" :style="{
            'background-image': 'url(' + failureUrl + ')',
            'background-size': '72px 72px',
            'background-repeat': 'no-repeat',
            'background-position': '99% 8px',
          }">
            <div class="shubiKq-top-left">
              <!-- <img src="./sx.png" alt="" srcset="" /> -->
              <div class="txt" v-if="item.couponType != '07'"><span class="icon">¥</span>{{ item.discountsAmt / 100 }}
              </div>
              <div class="txt" v-if="item.couponType == '07'">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_2181_29234)">
                    <rect width="48" height="48" rx="24" fill="#979797" fill-opacity="0.15" />
                    <rect opacity="0.3" x="16" y="13" width="46" height="28" rx="3" fill="#979797" />
                    <rect x="10" y="9" width="46" height="28" rx="3" fill="#979797" />
                    <path opacity="0.5" d="M39 9L39 37" stroke="#FFE4E4" stroke-dasharray="3 2" />
                    <rect opacity="0.6" x="18.7002" y="27.1997" width="1.4" height="2.8" rx="0.7" fill="white" />
                    <rect opacity="0.6" x="28.501" y="27.1997" width="1.4" height="2.8" rx="0.7" fill="white" />
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M18 18.1C18 16.9402 18.9402 16 20.1 16H28.5C29.6598 16 30.6 16.9402 30.6 18.1V23.5249H18V18.1ZM18 24.5749H30.6V26.5C30.6 27.6598 29.6598 28.6 28.5 28.6H20.1C18.9402 28.6 18 27.6598 18 26.5V24.5749ZM21.5 17.5742C21.2101 17.5742 20.975 17.8093 20.975 18.0992C20.975 18.3892 21.2101 18.6242 21.5 18.6242H27.1C27.3899 18.6242 27.625 18.3892 27.625 18.0992C27.625 17.8093 27.3899 17.5742 27.1 17.5742H21.5ZM20.799 27.1993H20.1002H20.099C19.713 27.1987 19.4002 26.8855 19.4002 26.4993C19.4002 26.1131 19.713 25.8 20.099 25.7993H20.1002H20.799C21.1856 25.7993 21.499 26.1127 21.499 26.4993C21.499 26.8859 21.1856 27.1993 20.799 27.1993ZM27.8 27.1993H28.5C28.8866 27.1993 29.2 26.8859 29.2 26.4993C29.2 26.1127 28.8866 25.7993 28.5 25.7993H27.8H27.7998C27.4132 25.7993 27.0998 26.1127 27.0998 26.4993C27.0998 26.8859 27.4132 27.1993 27.7998 27.1993H27.8Z"
                      fill="white" />
                  </g>
                  <defs>
                    <clipPath id="clip0_2181_29234">
                      <rect width="48" height="48" rx="24" fill="white" />
                    </clipPath>
                  </defs>
                </svg>

              </div>
            </div>
            <div class="shubiKq-top-right">
              <div class="shubiKq-name">{{ item.activityName }}</div>
              <div class="shubiKq-date">
                {{ getDates(item.endTime) }} 到期
              </div>
            </div>
            <!-- <div class="shubiKq-top-button" @click="goUseTicket">
              <img src="./sx.png" alt="">
            </div> -->
          </div>
          <div class="shubiKq-buttom" v-if="item.couponType == '07'">
            <div>{{ item.explain }}</div>
          </div>
        </div>
      </div>
    </div>
    <noData :text="text" v-show="show"></noData>
  </div>
</template>

<script>
import noData from "../noData/noData.vue";
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
export default {
  data() {
    return {
      failureUrl: require("@/assets/failure.png"),
      list: [],
      indexs: 1,
      text: "暂无失效卡",
      show: false,
      couponList: []
    };
  },
  components: { noData },
  mounted() { },
  methods: {
    getDates(str) {
      // 提取年、月、日
      const year = str.substring(0, 4);
      const month = str.substring(4, 6);
      const day = str.substring(6, 8);
      return year + "年" + month + "月" + day + "日";
    },
  },
  watch: {
    // "$route.query.id": "fetchData",
  },
  computed: {
    //  取存入的失效卡券
    IOSCardListData() {
      if (this.$route.path == "/failure") {
        if (
          this.$store.state.app.list.length > 0 ||
          this.$store.state.app.couponListLose.length > 0
        ) {
          // || this.$store.state.app.couponListLose.length > 0
          this.list = this.$store.state.app.list;
          this.couponList = this.$store.state.app.couponListLose;
          console.log(this.couponList, "----");
          this.show = false;
        } else {
          this.couponList = [];
          this.show = true;
          this.list = [];
        }
      }
      return false;
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.shubiKq-top-right {
 // margin-top: 21px;
 display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  // align-items: center;
  text-align: left;
  .shubiKq-name{
    color: #ccc;
    font-family: "PingFang SC";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 106.667% */
    margin-bottom :8px;
  }
  .shubiKq-date{
    color: #ccc;
    font-family: "PingFang SC";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 116.667% */
  }
}
.shubiKq {
  background: #FFFFFF;
  border-radius: 4px;
  margin-bottom:10px;

  .shubiKq-top {
    display: flex;
    // justify-content: space-around;
    align-items: center;

    .shubiKq-top-left {
      margin: 26px 0 20px;
      // background: #ef0012;
      padding: 0;
      width:110px;
      text-align:center;
      width:90px;
      .txt{
          color: #ccc;
          font-family: "PingFang SC";
          font-size: 34px;
          font-style: normal;
          font-weight: 500;
          // line-height: 34px; /* 100% */
        .icon{
          color: #ccc;
          font-family: "PingFang SC";
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        }

      }
      .zhouka-icon{
        width:48px;
        height:48px;
      }
    }

    // .shubiKq-top-right {
    //   margin-top: 21px;

    //   div {
    //     font-family: PingFang SC;
    //     font-style: normal;
    //     font-weight: normal;
    //     font-size: 15px;
    //     line-height: 16px;
    //     /* identical to box height, or 107% */
    //     color: #000000;
    //   }
    // }
  }

  .shubiKq-buttom {
    border-top: 0.2px #E6E6E6 solid;
    padding: 8px 0px;
    margin: 0px 16px;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #999999;
  }
}
.failure-body {
  padding: 12px;
  // margin 12px
  .failure {
    height: 118px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 8px;

    .failure-top {
      height: 88px;
      background: #ffffff;
      position: relative;

      .failure-top-num {
        position: absolute;
        height: 88px;
        width: 107px;
        left: 0px;
        font-size: 34px;
        color: #cccccc;
        text-align: center;
        line-height: 88px;

        .pay-num::before {
          content: '￥';
          font-size: 20px;
        }
      }

      .failure-top-content {
        position: absolute;
        height: 88px;
        left: 107px;
        color: #999999;

        .failure-code {
          padding-top: 27px;
          font-size: 14px;
          line-height: 20px;
        }

        .failure-time {
          padding-top: 4px;
          font-size: 12px;
          line-height: 17px;
        }
      }
    }

    .failure-footer {
      height: 30px;
      line-height: 30px;
      color: #999999;
     background: #FFFFFF;
box-shadow: inset 0px 0.5px 0px #E6E6E6;
      padding-left: 16px;
      font-size: 11px;
    }
  }
}
</style>
